<!--
 * @Description:
 * @version:
 * @Author: 陈捷
 * @Date: 2022-04-9 10:20:13
 * @LastEditors: 周子尧
 * @LastEditTime: 2022-04-11 10:30:03
-->
<template>
  <div>
    <div class="back-white">
      <van-form @submit="onSubmit">
        <van-row>
          <van-col span="24">
            <div class="cardbody" style="margin: 10px">
              <van-field
                v-model="name"
                label="姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
              />
              <van-field
                v-model="cardNumber"
                label="身份证号"
                :rules="[{ required: true, message: '请填写身份证号码' }]"
                @touchstart.native.stop="showCardNumber = true"
                @focus="forbid"
              />
              <van-number-keyboard
                v-model="cardNumber"
                :show="showCardNumber"
                extra-key="X"
                close-button-text="完成"
                @blur="showCardNumber = false"
              />
              <van-field
                v-model="tel"
                name="手机号"
                label="手机号"
                :rules="[
                  { required: true, message: '请填写手机号' },
                  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
                ]"
              />

              <van-field
                v-model="VerificationCode"
                name="验证码"
                label="验证码"
                :rules="[{ required: true, message: '请填写验证码' }]"
              />
              <van-field
                v-model="ResidentType"
                name="常住类型"
                label="常住类型"
                :rules="[{ required: true, message: '请填写常住类型' }]"
              />
              <van-field
                v-model="address"
                name="家庭住址"
                label="家庭住址"
                :rules="[{ required: true, message: '请填写家庭住址' }]"
              />
              <van-field
                v-model="Crowdlabel"
                name="人群标签"
                label="人群标签"
                :rules="[{ required: true, message: '请填写人群标签' }]"
              />
            </div>
          </van-col>
        </van-row>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
          >提交</van-button>
        </div>
      </van-form>

      <NoData v-if="false" />
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: 'IntentSigning',
  // import引入的组件需要注入到对象中才能使用
  components: {
  },
  data() {
    // 这里存放数据
    return {
      loading: false,
      name: '李飞雷', // 姓名
      tel: '13453467755', // 手机号
      address: '无锡市新吴区旺庄街道 长江北路200号23栋23室', // 家庭住址
      cardNumber: '320201199009092345', // 身份证号
      VerificationCode: '1342245', // 验证码
      ResidentType: '户籍', // 常住类型
      Crowdlabel: '肺结核患者(第一次入户随访)', // 人群标签
      submiting: false,
      showCardNumber: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 加载布尔值成功 初始化数据接口判断在这
    await this.getData()
    this.today = new Date()
    this.loading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // window.sessionStorage.clear();
    // console.log(this.$route.query.title);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周.期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    getData() {
      // 拉取数据接口
    },
    forbid() {
      // 禁止软键盘弹出
      document.activeElement.blur()
    },
    onSubmit(values) {
      console.log('submit', values)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
/deep/ .van-hairline--bottom::after {
  display: none !important;
}
/deep/ .van-field__label {
  color: #9b9b9b !important;
}
/deep/ .van-field__control {
  color: #4a4a4a;
  font-size: 15px;
  font-weight: 550;
  font-family: PingFangSC-Medium, PingFang SC;
}
</style>
